@extends("admin.public.layout")

@section("content")


        <div class="container-xxl flex-grow-1 container-p-y">
            <form method="post" id="uploadForm" action="" enctype="multipart/form-data">
                @csrf
                <input type="file" name="file" style="display: none" id="file">
            </form>

            <div class="row">


                <!-- Form controls -->
                <div class="col-md-6">
                    <div class="card mb-4">
                        <h5 class="card-header">{{$pageName}}</h5>
                        <div class="card-body">

                            <form action="{{ route('adminMusicUpdate') }}" method="post">
                                @csrf
                                <input required type="hidden" name="id" value="{{$music->id}}">
                                <div class="mb-3">
                                    <label for="music_name" class="form-label">音乐名</label>
                                    <input required type="text" class="form-control" id="music_name" name="music_name" value="{{$music->music_name}}">
                                </div>

                                <div class="mb-3">
                                    <label for="music_file" class="form-label">音乐文件</label>
                                    <input required class="form-control file-name" type="text" id="music_file" name="music_file" value="{{$music->music_file}}">
                                    <div class="row" style="margin: 5px 0px 10px 0px">
                                        <div class="col-md-3">
                                            <button class="btn btn-primary upload-btn" >上传文件</button>
                                        </div>
                                        <div class="col-md-5">
                                            <span id="uploadProcess">文件上传进度: 0%</span>
                                        </div>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label for="music_type_id" class="form-label">音乐分类</label>
                                    <select required class="form-select" id="music_type_id" name="music_type_id" aria-label="Default select example">
                                        @foreach($musicTypes as $k => $v)
                                            <option value="{{$k}}">{{$v}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <input required type="submit" class="form-control" value="修改">
                                </div>
                            </form>

                        </div>
                    </div>
                </div>

            </div>
        </div>




@endsection
@section("script")
    <script>
        $(function () {
            $(".upload-btn").click(function () {
                $("#file").click()
                return false;
            })

            $("#file").change(function () {
                let formData = new FormData($('#uploadForm')[0]);
                let xhr = new XMLHttpRequest();

                xhr.upload.onprogress = function(event) {
                    if (event.lengthComputable) {

                        // 在这里更新UI，比如更新进度条
                        let percentComplete =  Math.trunc((event.loaded / event.total) * 10000)/100;

                        $("#uploadProcess").text( "文件上传进度:" + percentComplete + "%")
                    }
                };

                xhr.onload = function() {
                    if (this.status === 200) {
                        console.log('上传成功:', JSON.parse(this.responseText).file_path);
                        $(".file-name").val(JSON.parse(this.responseText).file_path)
                    } else {
                        console.error('上传失败:', this.status);
                    }
                };

                xhr.open('POST', "{{route('adminUpload')}}", true);
                xhr.send(formData);
            })

        })
    </script>
@endsection
